import QtQuick 1.1
import com.nokia.meego 1.0


Rectangle {
    id: button

    //these properties act as constants, useable outside this QML file
    property int buttonHeight: 75
    property int buttonWidth: 140

    property string label
    property color textColor: buttonLabel.color

    property color borderColor: theme.inverted ? "#707070" : "silver"

    property real labelSize: 14

    property string imgButton: theme.inverted ? "image://theme/icon-m-toolbar-done-white" : "image://theme/icon-m-toolbar-done"
    property string imgButtonPress: theme.inverted ? "image://theme/icon-m-toolbar-done" : "image://theme/icon-m-toolbar-done-white"

    property string color1: theme.inverted ? "#505050" : "lightgray"
    property string color2: "transparent"

    Gradient {
        id: gr3
        GradientStop { position: 0; color: color1 }
        GradientStop { position: 1; color: color2 }
    }
    Gradient {
        id: gr2
        GradientStop { position: 0; color: color1 }
        GradientStop { position: 0.5; color: color2 }
        GradientStop { position: 1; color: color1 }
    }

    //gradient:

    //set appearance properties
    radius: 18
    smooth: true
    border { width: 3; color: borderColor }
    width: buttonWidth; height: buttonHeight

    Row {
        id: rowContent
        anchors.centerIn: parent
        anchors.fill: parent
        spacing: 15
        Label {
            anchors.verticalCenter: parent.verticalCenter
            text: ""
            width: imgButton != "" ? 10 : 30
        }
        Image {
            id: imgBtm
            smooth: true
            anchors.verticalCenter: parent.verticalCenter
            source: imgButton
        }
        Text {
            id: buttonLabel
            anchors.verticalCenter: parent.verticalCenter
            text: label
            font.pointSize: labelSize
            color: mytheme.fontMainColor
        }
    }

    states: [
        State {
                name: "normal"
                when: buttonMouseArea.pressed === false
                PropertyChanges { target: button; scale: 1.00; }
                PropertyChanges { target: button; gradient: gr2; }
                PropertyChanges { target: imgBtm; source: imgButton; }
        } ,
        State {
                name: "pressed"
                when: buttonMouseArea.pressed === true
                PropertyChanges { target: button; scale: 0.95; }
                PropertyChanges { target: button; gradient: gr3; }
                PropertyChanges { target: imgBtm; source: imgButtonPress; }
        }
    ]
    transitions: Transition {  NumberAnimation{ properties: "gradient,scale,source"; duration: 80 } }

    //buttonClick() is callable and a signal handler, onButtonClick is automatically created
    signal buttonClick()

    //define the clickable area to be the whole rectangle
    MouseArea {
        id: buttonMouseArea
        anchors.fill: parent
        onClicked: buttonClick()
    }
}
